<template>
  <div class="logIn">
    <div class="logIn_box" v-if="logIn">
      <h1>用户登录</h1>
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item
          name="accountNumber"
          :rules="[{ required: true, max: 10, message: '请输入账户' }]"
          class="username"
        >
          <a-input
            v-model:value="formState.accountNumber"
            placeholder="请输入账户"
            style="width: 3000px"
          >
            <template #prefix
              ><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /><span
                class="username_icon"
              ></span>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
          name="password"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password
            v-model:value="formState.password"
            type="password"
            placeholder="请输入密码"
          >
            <template #prefix
              ><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /><span
                class="password"
              ></span>
            </template>
          </a-input-password>
        </a-form-item>
      </a-form>
      <!-- :to="{path:'/index'}" -->
      <a-button class="bth" @click="onFinish">登录</a-button>
      <!-- <router-link >
       
      </router-link> -->

      <div class="footer">
        <span>暂无账号?</span><span @click="goregister">立即注册</span>
      </div>
    </div>

    <div class="register logIn_box" v-if="register">
      <h1>欢迎注册</h1>
      <a-form
        ref="formRef"
        name="custom-validation"
        :model="formState"
        :rules="rules"
        v-bind="layout"
        @finish="handleFinish"
        @validate="handleValidate"
        @finishFailed="handleFinishFailed"
      >
        <a-form-item name="username" class="username" style="margin-bottom:1vh;">
          <a-select
            ref="select"
            v-model:value="formState.level"
            @focus="focus"
            @change="handleChange"
            style="width: 97.5%"
            placeholder="选择账号类型"
          >
            <a-select-option value="0">子账号</a-select-option>
            <a-select-option value="1">母账号</a-select-option>
            <template #prefix><span class="username_icon" /> </template>
          </a-select>
        </a-form-item>
        <a-form-item name="username" class="username" style="margin-bottom: 1vh;">
          <a-input
            v-model:value="formState.accountNumber"
            placeholder="请输入账户名称"
          >
          </a-input>
        </a-form-item>
        <a-form-item name="username" class="username" style="margin-bottom: 1vh;">
          <a-input
            v-model:value="formState.userName"
            placeholder="请输入名字"
          >
          </a-input>
        </a-form-item>
        <a-form-item name="password"  style="margin-bottom: 1vh;">
          <a-input-password
            v-model:value="formState.password"
            type="password"
            placeholder="请输入登录密码"
          >
          </a-input-password>
        </a-form-item>


        <a-form-item name="username" class="username" v-if="formState.level == 0" style="margin-bottom: 2vh;">
          <a-select
            ref="select"
            v-model:value="formState.accountNumberByAdmin"
            @focus="focus"
            @change="handleChange"
            style="width: 97.5%"
            placeholder="请绑责任账号"
          >
            <a-select-option v-for="(item,index) in list" :key="index" :value="item.id">{{ item.userName }}</a-select-option>

          </a-select>
        </a-form-item>
        <!-- <a-form-item name="checkPass" class="username">
          <a-input-password v-model:value="formState.checkPass"  placeholder="请确认登录密码">
            <template #prefix><span class="confirmpassword" /> </template>
          </a-input-password>
        </a-form-item> -->
        <!-- <a-form-item name="phone" class="username">
          <a-input v-model:value="formState.phone"  placeholder="请输入手机号">
            <template #prefix><span class="phone" /> </template>
          </a-input>
        </a-form-item> -->
        <!-- <a-form-item name="verification" :rules="[{ required: true, message: '请输入验证码' }]" class="username auth">
          <a-input v-model:value="formState.verification"  placeholder="请输入验证码">
            <template #prefix><span class="verification" /> </template>
          </a-input>
          <a-button class="auth_bth" @click="downTime">{{timer}}</a-button>
        </a-form-item> -->
        <br>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit" class="bth" @click="addUserFun"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
      <div class="footer">
        <span>已有账号?</span><span @click="gologIn">去登录</span>
      </div>
    </div>
  </div>
</template>
<style lang="less">
@import "../assets/css/style/logo.less";
</style>
<script>
import login from "../server/login.js";

export default login;
</script>
